<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-tabs type="border-card">
        <el-tab-pane label="公众号营销">
          <div class="tip">
            <p>快速筛选出符合条件的职位进行复制到微信公众号中推送；</p>
            <p>职位默认按刷新时间排序；</p>
            <p>
              使用公众号二维码，用户需先关注公众号后才能查看，二维码有效期为30天；
            </p>
            <p>
              使用普通二维码，用户无需关注公众号直接识别即可打开触屏链接，二维码永久有效
            </p>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="信息类型">
                  <el-radio-group v-model="radio">
                    <el-radio :label="3">职位列表</el-radio>
                    <el-radio :label="6">企业列表</el-radio>
                    <el-radio :label="9">指定企业</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="职位类别">
                  <div class="block">
                    <el-cascader
                      :options="options"
                      :props="{ multiple: true, checkStrictly: true }"
                      clearable
                    ></el-cascader>
                  </div>
                </el-form-item>
                <el-form-item label="目标行业">
                  <div class="block">
                    <el-cascader
                      :options="options"
                      :props="{ multiple: true, checkStrictly: true }"
                      clearable
                    ></el-cascader>
                  </div>
                </el-form-item>
                <el-form-item label="目标地区">
                  <el-select v-model="model" placeholder="不限">
                    <el-option
                      v-for="item in targetArea"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="职业亮点">
                  <el-select v-model="model" placeholder="不限">
                    <el-option
                      v-for="item in careerHighlights"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="招聘人数">
                  <el-radio-group v-model="model">
                    <el-radio :label="label">不限</el-radio>
                    <el-radio :label="label">≥10</el-radio>
                    <el-radio :label="label">≥50</el-radio>
                    <el-radio :label="label">≥100</el-radio>
                  </el-radio-group>
                  <el-input-number
                    v-model="num"
                    @change="handleChange"
                    :min="1"
                    :max="10"
                    label="描述文字"
                  ></el-input-number>
                  <span style="color: rgb(153, 153, 153)"
                    ><i class="el-icon-warning-outline"></i
                    >招聘人数可以自设筛选</span
                  >
                </el-form-item>
                <el-form-item label="刷新时间">
                  <el-radio-group v-model="radio">
                    <el-radio :label="3">不限</el-radio>
                    <el-radio :label="6">今天</el-radio>
                    <el-radio :label="9">7天内</el-radio>
                    <el-radio :label="6">15天内</el-radio>
                    <el-radio :label="9">30天内</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="薪资待遇">
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox label="不限" disabled></el-checkbox>
                    <el-checkbox label="面议" disabled></el-checkbox>
                    <el-checkbox label="1500以下" disabled></el-checkbox>
                    <el-checkbox label="1500~3000" disabled></el-checkbox>
                    <el-checkbox label="3000~5000" disabled></el-checkbox>
                    <el-checkbox label="5000~8000" disabled></el-checkbox>
                    <el-checkbox label="8000~10000" disabled></el-checkbox>
                    <el-checkbox label="10000~15000" disabled></el-checkbox>
                    <el-checkbox label="15000以上" disabled></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="企业套餐">
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox label="不限" disabled></el-checkbox>
                    <el-checkbox label="基础会员" disabled></el-checkbox>
                    <el-checkbox label="优选企业" disabled></el-checkbox>
                    <el-checkbox label="专精特新小巨人" disabled></el-checkbox>
                    <el-checkbox
                      label="大优强/单项冠军/新能源"
                      disabled
                    ></el-checkbox>
                    <el-checkbox label="机关事业" disabled></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="输出内容">
                  <el-radio-group v-model="radio">
                    <el-radio :label="3">刷新时间</el-radio>
                    <el-radio :label="6">仅置顶职位</el-radio>
                    <el-radio :label="9">仅紧急职位</el-radio>
                    <el-radio :label="6">推广优先</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="生成数量">
                  <el-radio-group v-model="radio">
                    <el-radio :label="3">10条</el-radio>
                    <el-radio :label="6">20条</el-radio>
                    <el-radio :label="9">30条</el-radio>
                    <el-radio :label="6">50条</el-radio>
                    <el-radio :label="9">80条</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">搜索并添加</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="12">
              <div class="rightList">
                <span class="rightTitle"> <b>推文列表</b>（拖拽可排序） </span>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="模版管理">
          <el-row :gutter="10">
            <el-col :span="6">
              <div class="tem_div">
                <div class="tem_add">
                  <el-row>
                    <i
                      class="el-icon-circle-plus"
                      style="
                        font-size: 75px;
                        color: rgb(64, 158, 255);
                        margin-bottom: 20px;
                      "
                    ></i>
                  </el-row>
                  <span style="font-size: 16px; color: rgb(64, 158, 255)"
                    >新增模版</span
                  >
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="tem_div">
                <el-card>
                  <div slot="header">企业模版</div>
                  <div class="el-card__body">
                    <span style="color: rgb(153, 153, 153);">模版名称</span>
                    <div style="margin-top: 16px;">仑传-企业-推文</div>
                    <div style="margin-top: 38px;">
                      <el-button type="primary" style="margin-right: 20px;" size="small">编辑</el-button>
                      <el-button type="danger" size="small">删除</el-button>
                    </div>
                  </div>
                </el-card>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="tem_div">
                <el-card>
                  <div slot="header">职业模版</div>
                  <div class="el-card__body">
                    <span style="color: rgb(153, 153, 153);">模版名称</span>
                    <div style="margin-top: 16px;">仑传-职位-推文</div>
                    <div style="margin-top: 38px;">
                      <el-button type="primary" style="margin-right: 20px;" size="small">编辑</el-button>
                      <el-button type="danger" size="small">删除</el-button>
                    </div>
                  </div>
                </el-card>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="tem_div">
                <el-card>
                  <div slot="header">
                    <span style="color: rgb(102, 102, 102);">
                       企业模板 
                       <b style="font-size: 12px; color: rgb(102, 102, 102); font-weight: normal;">（系统模板）</b>
                    </span>
                  </div>
                  <div class="el-card__body">
                    <span style="color: rgb(153, 153, 153);">模版名称</span>
                    <div style="margin-top: 16px;">仑传-企业-推文</div>
                    <div style="margin-top: 38px;">
                      <el-button type="primary" style="margin-right: 20px;" size="small">编辑</el-button>
                      <el-button type="danger" size="small">删除</el-button>
                    </div>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <div class="tem_div">
                <el-card>
                  <div slot="header">
                    <span style="color: rgb(102, 102, 102);">
                       职位模板 
                       <b style="font-size: 12px; color: rgb(102, 102, 102); font-weight: normal;">（系统模板）</b>
                    </span>
                  </div>
                  <div class="el-card__body">
                    <span style="color: rgb(153, 153, 153);">模版名称</span>
                    <div style="margin-top: 16px;">职位默认模板</div>
                    <div style="margin-top: 38px;">
                      <el-button type="" size="small">查看</el-button>
                    </div>
                  </div>
                </el-card>
              </div>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局",
                },
                {
                  value: "color",
                  label: "Color 色彩",
                },
                {
                  value: "typography",
                  label: "Typography 字体",
                },
                {
                  value: "icon",
                  label: "Icon 图标",
                },
                {
                  value: "button",
                  label: "Button 按钮",
                },
              ],
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框",
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框",
                },
                {
                  value: "input",
                  label: "Input 输入框",
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器",
                },
                {
                  value: "select",
                  label: "Select 选择器",
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器",
                },
                {
                  value: "switch",
                  label: "Switch 开关",
                },
                {
                  value: "slider",
                  label: "Slider 滑块",
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器",
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器",
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器",
                },
                {
                  value: "upload",
                  label: "Upload 上传",
                },
                {
                  value: "rate",
                  label: "Rate 评分",
                },
                {
                  value: "form",
                  label: "Form 表单",
                },
              ],
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格",
                },
                {
                  value: "tag",
                  label: "Tag 标签",
                },
                {
                  value: "progress",
                  label: "Progress 进度条",
                },
                {
                  value: "tree",
                  label: "Tree 树形控件",
                },
                {
                  value: "pagination",
                  label: "Pagination 分页",
                },
                {
                  value: "badge",
                  label: "Badge 标记",
                },
              ],
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告",
                },
                {
                  value: "loading",
                  label: "Loading 加载",
                },
                {
                  value: "message",
                  label: "Message 消息提示",
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框",
                },
                {
                  value: "notification",
                  label: "Notification 通知",
                },
              ],
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单",
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页",
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑",
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单",
                },
                {
                  value: "steps",
                  label: "Steps 步骤条",
                },
              ],
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框",
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示",
                },
                {
                  value: "popover",
                  label: "Popover 弹出框",
                },
                {
                  value: "card",
                  label: "Card 卡片",
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯",
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板",
                },
              ],
            },
          ],
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components",
            },
            {
              value: "sketch",
              label: "Sketch Templates",
            },
            {
              value: "jiaohu",
              label: "组件交互文档",
            },
          ],
        },
      ],
      targetArea: [
        { id: 1, name: "不限" },
        { id: 2, name: "计算机软件/硬件" },
        { id: 3, name: "计算机系统/维修" },
        { id: 4, name: "通信(设备/运营/服务)" },
        { id: 5, name: "互联网/电子商务" },
        { id: 6, name: "网络游戏" },
        { id: 7, name: "电子/半导体/集成电路" },
        { id: 8, name: "仪器仪表/工业自动化" },
        { id: 9, name: "会计/审计" },
        { id: 10, name: "金融(投资/证券" },
        { id: 11, name: "金融(银行/保险)" },
        { id: 12, name: "贸易/进出口" },
        { id: 13, name: "批发/零售" },
        { id: 14, name: "消费品(食/饮/烟酒)" },
        { id: 15, name: "服装/纺织/皮革" },
        { id: 16, name: "家具/家电/工艺品/玩具" },
        { id: 17, name: "办公用品及设备" },
        { id: 18, name: "机械/设备/重工" },
        { id: 19, name: "汽车/摩托车/零配件" },
        { id: 20, name: "制药/生物工程" },
        { id: 21, name: "医疗/美容/保健/卫生" },
        { id: 22, name: "医疗设备/器械" },
        { id: 23, name: "广告/市场推广" },
        { id: 24, name: "会展/博览" },
        { id: 25, name: "影视/媒体/艺术/出版" },
        { id: 26, name: "印刷/包装/造纸" },
        { id: 27, name: "房地产开发" },
        { id: 28, name: "建筑与工程" },
        { id: 29, name: "家居/室内设计/装潢" },
        { id: 30, name: "物业管理/商业中心" },
        { id: 31, name: "中介服务/家政服务" },
        { id: 32, name: "专业服务/财会/法律" },
        { id: 33, name: "检测/认证" },
        { id: 34, name: "教育/培训" },
        { id: 35, name: "学术/科研" },
        { id: 36, name: "餐饮/娱乐/休闲" },
        { id: 37, name: "酒店/旅游" },
        { id: 38, name: "交通/运输/物流" },
        { id: 39, name: "航天/航空" },
        { id: 40, name: "能源(石油/化工/矿产)" },
        { id: 41, name: "能源(采掘/冶炼/原材料)" },
        { id: 42, name: "电力/水利/新能源" },
        { id: 43, name: "政府部门/事业单位" },
        { id: 44, name: "非盈利机构/行业协会" },
        { id: 45, name: "农业/渔业/林业/牧业" },
        { id: 46, name: "其他行业" },
      ],
      careerHighlights: [
        { id: "1", name: "五险一金" },
        { id: "1", name: "双休" },
        { id: "1", name: "单休" },
        { id: "1", name: "不加班" },
        { id: "1", name: "加班补贴" },
        { id: "1", name: "朝九晚五" },
        { id: "1", name: "年休假" },
        { id: "1", name: "班车" },
        { id: "1", name: "包吃包住" },
        { id: "1", name: "包吃" },
        { id: "1", name: "提供住宿" },
        { id: "1", name: "餐费补贴" },
        { id: "1", name: "工作餐" },
        { id: "1", name: "年终奖" },
        { id: "1", name: "节日福利" },
        { id: "1", name: "有提成" },
        { id: "1", name: "环境好" },
        { id: "1", name: "车贴" },
        { id: "1", name: "房帖" },
        { id: "1", name: "晋升快" },
        { id: "1", name: "技术培训" },
        { id: "1", name: "健康体检" },
        { id: "1", name: "员工旅游" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.tip {
  padding: 8px 16px;
  background-color: #fdf6ec;
  border-radius: 4px;
  border-left: 5px solid #f9c77c;
  margin: 0 0 20px;
  p {
    font-size: 14px;
    color: #e6a23c;
    line-height: 1em;
  }
}
.rightList {
  width: 40%;
  border: 1px solid rgb(247, 248, 249);
  height: 700px;
  overflow: hidden auto;
  padding: 20px 20px 60px;
  box-sizing: border-box;
  position: relative;
  background: rgb(255, 255, 255);
}
.tem_div {
  height: 230px;
  width: 300px;
  border: 1px solid #eee;
  border-radius: 5px;
  float: left;
  margin-right: 18px;
  margin-top: 18px;
  position: relative;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .tem_add {
    margin: 60px auto;
    text-align: center;
    cursor: pointer;
  }
}
.el-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
